<template>
	<view>
    <u-grid col="3" align="left" :border="false" >
          <u-grid-item v-for="(item,index) in videoList"
                       :key="index"
                       @click="toVideoDetail(item)"
                       bg-color="transparent"
                       :custom-style="{padding:'5px 0'}"
          >
            <view >
              <view class="tn-flex tn-flex-col-center tn-flex-row-center tn-flex-direction-column">
                <view style="position: relative">
                  <image :src="item.tv_image|handlePic" class="dm-tv-image-bg"/>
                  <text class="tv_tag" v-if="!isWatchingPage">热播</text>
                </view>
                <view class="tn-flex tn-flex-direction-column " style="width: 120px">
                  <view class="tn-text-bold tn-text-ellipsis">{{item.tv_name}}</view>
                  <view v-if="isWatchingPage">
                    <view class="tn-text-sm dm-color-gray tn-text-ellipsis">观看至{{item.series}}集</view>
                  </view>
                  <view v-else>
                    <view class="tn-text-sm dm-color-gray tn-text-ellipsis" v-if="!item.is_end">更新至第{{item.updatedEpisodeTo}}集</view>
                    <view class="tn-text-sm dm-color-gray tn-text-ellipsis" v-else>已完结•共{{item.update_witch}}集</view>
                  </view>
                </view>
              </view>
            </view>
          </u-grid-item>
      </u-grid>
	</view>

</template>

<script>
  import common_mixin from '@/libs/mixin/common_mixin.js'
	export default {
		name: "grid-video-list",
		mixins: [common_mixin],
		data() {
			return {

			};
		},
		props: ['videoList','isWatchingPage'],
		methods: {
		}
	}
</script>

<style lang="scss">

  .tv_tag {
    z-index: 1;
    top: 0;
    left: 0;
    position: absolute;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 10px;
    color: #fff;
    padding: 2px 10px;
    background-color: #FF943D;
  }
  .tn-grid-item{
    background: none;
  }
</style>
